<template>
  <div id="tv">
    <ul>
      <li @click="$router.push('/tvDetail/'+tv.id)" class="tv-item" v-for="tv in tvList" :key="tv.id">
        <div class="tv-img">
          <img :src="imgBase + tv.pic.normal" alt="" />
        </div>
        <div class="tv-info">
          <h3>{{ tv.title }}</h3>
          <p>{{ tv.card_subtitle }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
  
  <script>
export default {
  name: "Tv",
  created() {
    this.getData();
    this.lazyLoad();
  },
  data() {
    return {
      baseUrl: "https://bird.ioliu.cn/v2?url=",
      imgBase: "https://images.weserv.nl/?url=",
      tvList: [],
      start: 0,
      count: 8,
      canGet: true,
    };
  },
  props: {},
  methods: {
    getData() {
      if (this.canGet) {
        this.canGet = false
          this.axios
            .get(
              this.baseUrl +
                `https://m.douban.com/rexxar/api/v2/subject_collection/tv_domestic/items?start=${this.start}&count=${this.count}&loc_id=108288`
            )
            .then((response) => {
              this.tvList = [
                ...this.tvList,
                ...response.data.subject_collection_items,
              ];
              this.canGet = true
            });
      }
    },
   lazyLoad() {
      // 获取html元素
      const htmlDom = document.documentElement
      // 文档高度
      let domHeight = 0;
      // 设备高度
      const deviceHeight = htmlDom.clientHeight
      // console.log(domHeight, deviceHeight);

      let scrollTop = 0
      window.onscroll = () => {
        // 滚动条滚动的距离
        scrollTop = htmlDom.scrollTop;
        domHeight = htmlDom.offsetHeight
        if (domHeight < deviceHeight + scrollTop + 20 && this.start < 40 && this.canGet) {
          // 请求更多的数据
          this.start += this.count
          this.getData()
        }
      }
    }
  },
};
</script>
  
  <style lang="scss" scoped>
.tv-item {
  display: flex;
  height: 150px;
  margin: 10px 0;
  .tv-img {
    flex: 1;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .tv-info {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
</style>